<template>
  <!-- 统计区域组件 -->
  <div class="dashboard">
    <!-- 入园打卡统计 -->
    <div class="stat-card">
      <div class="card-header">
        <h3>入园打卡</h3>
        <el-button type="primary" size="small" @click="showReissueDialog('enter')">补卡</el-button>
      </div>
      <div class="chart-container">
        <Echart
          :width="getViewportPx(500)"
          :height="getViewportPx(260)"
          :options="usePieOptions(enterData, options).baseOptions"
        />
        <div class="data-grid">
          <div v-for="(item, index) in enterData" :key="index" class="data-item">
            <div class="count">{{ item.value }}</div>
            <div class="label">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 出园打卡统计 -->
    <div class="stat-card">
      <div class="card-header">
        <h3>出园打卡</h3>
        <el-button type="primary" size="small" @click="showReissueDialog('exit')">补卡</el-button>
      </div>
      <div class="chart-container">
        <Echart
          :width="getViewportPx(500)"
          :height="getViewportPx(260)"
          :options="usePieOptions(exitData, options).baseOptions"
        />
        <div class="data-grid">
          <div v-for="(item, index) in exitData" :key="index" class="data-item">
            <div class="count">{{ item.value }}</div>
            <div class="label">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 表单弹窗：添加/修改 -->
    <replaceCardDialog ref="formRef" @success="getData" />
  </div>
</template>

<script lang="ts" setup>
import { usePieOptions } from '@/hooks/chart/usePieOptions'
import replaceCardDialog from './replaceCardDialog.vue'
import { DeviceGateRecordApi } from '@/api/school/smartDevice/gateRecord/index'
import { formatDate } from '@/utils/formatTime'
import { getViewportPx } from '@/utils/formatter'
// 类型定义
type ChartType = 'enter' | 'exit'
interface DataItem {
  name: string
  value: number
}
const props = defineProps<{
  classId: number
  queryDate: string
}>()
const options = {
  color: ['#47D147', '#F5BF49', '#FC5C53', '#fc8452'],
  legend: {
    top: 0
  },
  series: [
    {
      center: ['50%', '55%'],
      label: {
        formatter: '{c}人'
      }
    }
  ]
}
const baseData = ref()
const enterKeyMap = {
  enteredCount: '入园',
  lateCount: '迟到',
  notEnteredCount: '未入园',
  entryExceptionCount: '其他异常'
}
const exitKeyMap = {
  exitedCount: '出园',
  earlyExitCount: '早退',
  notExitedCount: '未出园',
  exitExceptionCount: '其他异常'
}
// 入园数据
const enterData = ref<DataItem[]>([])

// 出园数据
const exitData = ref<DataItem[]>([])
const getData = async () => {
  try {
    baseData.value = await DeviceGateRecordApi.getDeviceGateRecordReport(
      props.classId,
      props.queryDate || formatDate(new Date(), 'YYYYMMDD')
    )
    if (!Object.keys(baseData.value).length) {
      return
    }
    enterData.value = Object.keys(enterKeyMap).map((item) => {
      return {
        name: enterKeyMap[item],
        value: baseData.value[item]
      }
    })
    exitData.value = Object.keys(exitKeyMap).map((item) => {
      return {
        name: exitKeyMap[item],
        value: baseData.value[item]
      }
    })
  } catch (error) {
    console.log(error)
  }
}

const formRef = ref()
// 显示补卡弹窗
const showReissueDialog = (type: ChartType) => {
  formRef.value.open(type, props.classId)
}

watch(
  () => [props.classId, props.queryDate],
  () => {
    if (props.classId) {
      getData()
    }
  },
  {
    immediate: true
  }
)
defineExpose({
  baseData
})
</script>

<style scoped>
.dashboard {
  display: flex;
  width: 100%;
  padding: 15px;
  gap: 20px;
  flex-direction: column;
}

.stat-card {
  padding: 15px;
  background-color: #fff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 5%);
  flex: 1;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.chart-container {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-direction: column;
}

.data-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10%;
  flex: 1;
  width: 100%;
}

.data-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
}

.count {
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: bold;
}

.label {
  font-size: 12px;
  color: #606266;
}
</style>
